<template>
	<view>
		<view class="container u-skeleton">
			<Back />
			<view class="header"></view>
			<text class="header-title u-skeleton-rect">历史足迹</text>
			<u-empty text="没有历史足迹" mode="list" v-if="collectList.length === 0"></u-empty>
			<view class="phase" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-for="(item, index) in collectList" :key="index" @tap="phaseTap(item)">
				<view class="phase-box">
					<view class="image"><ImageLoad :src="item.coverUrl" borderRadius="30" /></view>
				</view>
				<view class="phase-box">
					<text class="mark">{{ titleMap[item.type] }}</text>
					<text class="title">{{ item.title || item.name }}</text>
					<text class="time">{{ $u.timeFormat(item.dateMs, 'yyyy-mm-dd  hh:MM') }}</text>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			collectList: [],
			titleMap: {
				picbook: '童趣绘本',
				course: '热点咨询',
				trail: '认知测评'
			}
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/topic/topic' ,
			imageUrl: ''
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		loadData: async function() {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadTrackList, { deviceUuid: this.deviceUuid }))
			this.collectList = data.tracks
			this.loading = false
		},
		phaseTap: async function(item) {
			if (item.type === 'trail') this.toTrail(item)
			if (item.type === 'picbook') this.toPicbook(item)
			if (item.type === 'course') this.toCourse(item)
		},
		toPicbook: async function(item) {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadPicbookData, { picbookId: item.id }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
				return
			}
			this.$Router.push({ name: 'picbook', query: { item: JSON.stringify(data.picbook) } })
		},
		toCourse: function(item) {
			this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(item) } })
		},
		toTrail: async function(item) {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.listQuestions, { phase: item.phase, module: 'trail' }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
			}
			const questions = data.questions.sort(function() {
				return Math.random() - 0.5
			})
			this.$Router.push({ name: 'assignment', query: { questions: JSON.stringify(questions) } })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white
	padding-bottom 60rpx
	.header
		width 750rpx
		height 320rpx
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
		position absolute
	.header-title
		color white
		font-size 55rpx
		width fit-content
		font-weight 600
		margin 10vh 0 0 40rpx
		text-shadow 2rpx 2rpx 2rpx #EFBC34
		z-index 1
	.phase
		width 680rpx
		height 250rpx
		margin 45rpx 0 0 35rpx
		background white
		box-shadow 0 0 50rpx #dcdfe6
		border-radius 20rpx
		display flex
		transition all 0.3s
		z-index 1
		.phase-box
			width 50%
			height 100%
			position relative
			display flex
			justify-content center
			flex-direction column
			.image
				width 90%
				height 85%
				margin-left 5%
				position relative
				border-radius 30rpx
				overflow hidden
				transform translate3d(0, 0, 0)
			.mark
				position absolute
				right 20rpx
				top 10rpx
				color #FF643E
				font-size 22rpx
			.title
				font-size 35rpx
				font-weight bold
			.time
				font-size 25rpx
				position absolute
				bottom 20rpx
				color #8E8D8D
</style>
